<template>
  <view>
    <!-- 1.0 搜索框 -->
    <ugo-search></ugo-search>
    <!-- 1.0 搜索框 -->

    <!-- 2.0 tab栏 -->
    <u-tabs :current="current" :list="tabs" :scrollable="false" @click="click"></u-tabs>
    <!-- 2.0 tab栏 -->

    <!-- 3.0 内容 -->
    <view>
      <view v-if="current === 0">
        <navigator
          :url="'/pages/goods_detail/goods_detail?goods_id=' + item.goods_id"
          class="goods-item"
          v-for="item in goods"
          :key="item.goods_id"
        >
          <view class="goods-item-img">
            <image :src="item.goods_small_logo"></image>
          </view>
          <view class="goods-item-info">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-price">￥{{ item.goods_price }}</view>
          </view>
        </navigator>
      </view>
      <view v-else-if="current === 1">销量</view>
      <view v-else-if="current === 2">价格</view>
    </view>
    <!-- 3.0 内容 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: [{ name: '综合' }, { name: '销量' }, { name: '价格' }],
        current: 0,
        // 商品列表
        goods: [],
        // 接口要用到的4个参数
        params: {
          // 否	string	关键字
          query: '',
          // 否	string	分类id
          cid: '',
          // 否	number	页码
          pagenum: 1,
          // 否	number	页容量
          pagesize: 10
        },

        // 接口数据的总条数
        total: 0
      }
    },
    async onLoad({ cid }) {
      //   this.params.cid = 5
      this.params.cid = cid || 5
      this.getGoods()
    },
    // 滚动条触底事件
    onReachBottom() {
      // 判断还有没有下一页数据
      // 拿发送请求 回来的 数组的长度   和  接口返回值 total 总条数 做比较即可
      if (this.goods.length >= this.total) {
        // 没有下一页
        // console.log("没有下一页");
        uni.showToast({
          title: '没有下一页了',
          icon: 'none'
        })
        return
      }

      this.params.pagenum++
      this.getGoods()
    },
    // 下拉刷新
    async onPullDownRefresh() {
      this.params.pagenum = 1
      this.goods = []
      await this.getGoods() // 等待它数据回来 我们再去关闭 下拉刷新组件
      // 主动关闭下拉刷新 ！！
      uni.stopPullDownRefresh()
    },
    methods: {
      click({ index }) {
        this.current = index
      },
      // 发送请求获取商品列表
      async getGoods() {
        const res = await uni.$u.http.get('/goods/search', {
          params: this.params
        })
        // 新旧的数组合并
        this.goods = [...this.goods, ...res.message.goods]
        // 给总条数赋值
        this.total = res.message.total
      }
    }
  }
</script>

<style lang="scss">
.u-tabs__wrapper__nav__line {
  background-color: red !important;
}
.goods-item {
  display: flex;
  margin-top: 10rpx;
  .goods-item-img {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    image {
      width: 192rpx;
      height: 191rpx;
      background-color: #ccc;
    }
  }

  .goods-item-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    font-size: 28rpx;
    color: #666;
    flex: 2;

    .goods-price {
      color: #eb4450;
    }
  }
}
</style>